﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" /> 
    <meta name="description" content="jqxCalendar provides support for localizing its content and
        dates for different languages and date formats. Each localization is contained within
        its own file with the language code appended to the name, e.g. jquery.glob.de-DE.js
        for German. The desired localization file should be along with the jqxcalendar.js.
        The localization is set to all jqxCalendar instances by setting the jqxCalendar's
        culture property." />
    <title id='Description'>jqxCalendar provides support for localizing its content and
        dates for different languages and date formats. Each localization is contained within
        its own file with the language code appended to the name, e.g. jquery.glob.de-DE.js
        for German. The desired localization file should be along with the jqxcalendar.js.
        The localization is set to all jqxCalendar instances by setting the jqxCalendar's
        culture property. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // define available cultures
                var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

                // create a calendar.
                $("#jqxCalendar").jqxCalendar({ width: '220px', height: '220px', enableTooltips: false});
                // create a ComboBox
                $("#jqxDropDownList").jqxDropDownList({ source: days, selectedIndex: 6,  width: '200px', autoDropDownHeight: true, height: '25px' });
                // set the culture.
                $("#jqxDropDownList").on('select', function (event) {
                    var index = event.args.index;
                    if (index == 6) {
                        index = -1;
                    }
                    $("#jqxCalendar").jqxCalendar({ firstDayOfWeek: index + 1 });
                });
            });
        </script>
        <div style='float: left; width: 250px;' id='jqxWidget'>
            <div id='jqxCalendar'>
            </div>
            <br />
            <div>
                <br />         
                <div style='float: left; font-family: "Verdana", "sans-serif";
                    font-size: 13px;'>
                    Choose the first day of the week</div>
                <br />
                <br />
                <div style='float: left;' id='jqxDropDownList'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
